<template>
  <div class="ui-page-msg" ref="container" :style="{width:width + 'px', height: height + 'px', marginBottom: marginBottom + 'px', opacity: opacity}">
    <div class="ui-page-msg-icon" v-if="icon">
      <x-image :src="icon" width="300"></x-image>
    </div>
    <div class="ui-page-msg-text">
      <text class="ui-page-msg-text-desc">{{msg}}</text>
    </div>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";

  .ui-page-msg {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &-icon {

    }
    &-text {
      &-desc {
        font-size: $font-size-base;
        color: $color-muted;
      }
    }
  }
</style>
<script>
let dom = weex.requireModule('dom')
let urlPath = require('../include/url-path')
module.exports = {

  props: {
    icon: {default: urlPath.assets('images/aiya.png?v=2')},
    iconWidth: {default: 300},
    iconHeight: {default: 240},
    msg: {default: '温馨提示'},
    offset: {default: 0}
  },

  data () {
    return {
      width: 0,
      height: 0,
      marginBottom: 0,
      opacity: 0
    }
  },
  components: {
    'x-image': require('./x-image.vue')
  },
  created () {
    if (!this.width) {
      this.width = 750
    }
  },
  mounted () {
    setTimeout(() => {
      let deviceHeight = weex.config.env.deviceHeight
      dom.getComponentRect(this.$refs.container, rs => {
        if (rs.result) {
          this.height = (deviceHeight - rs.size.top * 2)
          this.marginBottom = rs.size.top * 750 / weex.config.env.deviceWidth
        } else {
          this.height = deviceHeight
        }
        this.height = (this.height + this.offset) * 750 / weex.config.env.deviceWidth
        this.opacity = 1
      })
    }, 100)
  },
  methods: {}
}
</script>
